<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('选择位置')"/>
    <th:block th:include="include :: datetimepicker-css"/>
    <th:block th:include="include :: select2-css"/>
</head>
<style>
    select {
        padding-top: 3px !important;
    }

    .select-list {
        margin-top: 5px !important;
    }

    #container {
        width: 100%;
        height: 490px;
        margin-top: 5px;
    }
</style>
<body>
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="project-form">

                <div class="col-sm-12">
                    <div class="select-list">
                        <ul>
                            <li>
                                <p>地理位置：</p>
                                <input type="text" name="position" id="position" th:value="${proPosition}"
                                       class="form-control">
                            </li>
                            <li>
                                <a class="btn btn-primary btn-rounded btn-sm" onclick="searchex()"><i
                                        class="fa fa-search"></i>&nbsp;搜索</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </form>
        </div>
        <div class="col-sm-12 select-table table-striped">
            <div id="container"></div>
        </div>
    </div>
</div>

<th:block th:include="include :: footer"/>
<th:block th:include="include :: select2-js"/>
<th:block th:include="include :: datetimepicker-js"/>
<script type="text/javascript"
        src="https://webapi.amap.com/maps?v=1.4.15&key=	2b6757dc0f1864263964fafb2f8e7270"></script>
<script>
    var prefix = ctx + "projectManage";
    $(function () {
        setTimeout(function () {
            $(".btn-rounded").click();
        }, 500)
    })
    var map = new AMap.Map('container', {
        resizeEnable: true,
        zoom: 14
    });
    var geolocation;
    var pos_data;
    var addressex;
    map.plugin('AMap.Geolocation', function () {
        geolocation = new AMap.Geolocation({
            enableHighAccuracy: true, //是否使用高精度定位，默认:true
            timeout: 10000, //超过10秒后停止定位，默认：无穷大
            buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
            zoomToAccuracy: false, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
            buttonPosition: 'RB',

        });
        map.addControl(geolocation);
        geolocation.getCurrentPosition();
        AMap.event.addListener(geolocation, 'complete', onComplete); //返回定位信息

    });

    function onComplete(data) {
        pos_data = data.formattedAddress + data.addressComponent.streetNumber;
    }

    function searchex() {

        var geocoder = new AMap.Geocoder({
            city: "0550",
            zoom: 14
        });
        var address = $("input[name='position']").val();
        map.clearMap();
        geocoder.getLocation(address, function (status, result) {
            if (status === 'complete' && result.geocodes.length) {
                var marker = new AMap.Marker();
                var lnglat = result.geocodes[0].location;
                marker.setPosition(lnglat);
                map.add(marker);
                map.setFitView(marker);
                geocoder.getAddress(lnglat, function (status, result) {
                    addressex = result.regeocode.formattedAddress;
                })

            }
        })


    }

    function submitHandler() {
        if ($("input[name='position']").val() == '') {
            $.modal.alertSuccess('请选择位置');
        } else {
            $("#proPosition", parent.document).val(addressex);
            $.modal.close();
        }
    }


</script>
</body>
</html>